<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>主题阅读</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <th:block th:include="common/link::link"></th:block>
    <link href="../static/eb/subject.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>

<div class="main layui-clear">
    <div class="wrap">
        <div class="content">

            <div class="fly-panel">
                <div class="fly-tab">
        <span>
          <a href="javascript:void(0)" onclick="allFn()" name="all" id="all">综合</a><!--class="tab-this"-->
          <a href="javascript:void(0)" onclick="likeFn()" name="like" id="like">点赞 ↓</a>
          <a href="javascript:void(0)" onclick="commentFn()" name="comment" id="comment">评论⬇︎</a>
          <a href="javascript:void(0)" onclick="viewFn()" name="view" id="view">浏览量⇩</a>
        </span>
<!--                    <form action="#" class="fly-search">
                        <i class="iconfont icon-sousuo"></i>
                        <input class="layui-input" autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="q">
                    </form>-->

                </div>
                <ul class="archive-list"
                    style="border:none; background:#ffffff;" id="ebook-list">
<!--
                    <li class="archive-item" style="display: block;height: 145px; border-bottom: 1px solid #eff2f5">
                        <a href="#" title="标题">
                            <div class="covercon">
                                <img src="https://user-gold-cdn.xitu.io/2017/12/18/160691fc2995dbf9?imageView2/1/w/200/h/280/q/95/format/webp/interlace/1"
                                     class="cover imgloadinglater" style="display: block;">
                            </div>
                        </a>
                        <div class="archive-text">
                            <div class="archive-detail">
                                <h3><a href="#" title="文章标题">书籍标题</a></h3>
                                <p>这是介绍内容</p>
                                <div class="archive-info clearfix"
                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">
                                    <ul style="padding: 0;">
                                        <li class="list-user">
                                            <a href="#" target="_blank">
                                                <img src="../static/images/avatar/flyhero.jpg">
                                                <span>flyero</span>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                                <div class="archive-info clearfix"
                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">
                                    <ul style="padding: 0;">
                                        <li class="list-msg">
                                            <a href="#">
                                                <span class="layui-btn layui-btn-xs layui-btn-normal">订阅本书</span>
                                            </a>
                                            <span aria-hidden="true" style="margin-left: 8px;">已有1002人订阅</span>
                                            <span aria-hidden="true" style="margin-left: 5px;"><i class="fa fa-eye fa-fw" title="阅读"></i> 271</span>
                                            <span aria-hidden="true"><i class="fa fa-commenting fa-fw" title="回答"></i> 8</span>
                                            <span aria-hidden="true"><i class="fa fa-thumbs-o-up fa-fw" title="人气"></i> 106</span>
                                        </li>

                                    </ul>
                                </div>

                            </div>
                        </div>
                    </li>-->


                </ul>
            </div>
        </div>
    </div>

    <div class="edge">
        <div class="fly-panel leifeng-rank">
            <h3 class="fly-panel-title">新书推荐</h3>
            <dl>


            </dl>
        </div>

    </div>
</div>
<th:block th:replace="common/footer::footer"></th:block>

<script th:inline="javascript">

    var host = [[${rootPath}]];

    $(function () {
        $("#ebook-list").empty();
        $(".nav a").removeClass("nav-this");
        $("#subject").addClass("nav-this")
        getData(1, 1, 1);
    });

    function likeFn() {
        $("#ebook-list").empty();
        getData(1, 0, 0);
        $("a").removeClass("tab-this")
        $("#like").addClass("tab-this");
    };

    function commentFn() {
        $("#ebook-list").empty();
        getData(0, 1, 0);
        $("a").removeClass("tab-this")
        $("#comment").addClass("tab-this");
    };

    function viewFn() {
        $("#ebook-list").empty();
        getData(0, 0, 1);
        $("a").removeClass("tab-this")
        $("#view").addClass("tab-this");
    };

    function allFn() {
        $("#ebook-list").empty();
        getData(1, 1, 1);
        $("a").removeClass("tab-this")
        $("#all").addClass("tab-this");
    };

    function getData(like, comment, view) {
        //var rootPath =  [[${rootPath}]].toString();
        layui.use('flow', function () {
            var flow = layui.flow;
            var pageCount;
            flow.load({
                elem: '#ebook-list', //流加载容器
                scrollElem: '#ebook-list', //滚动条所在元素，一般不用填，此处只是演示需要。
                isAuto: false,
                isLazyimg: true,
                done: function (page, next) { //加载下一页

                    //模拟插入
                    setTimeout(function () {
                        var lis = [];
                        $.ajax({
                            type: 'POST',
                            url: "../subject/findSubjectList",
                            dataType: "json",
                            data: {
                                "pageNum": page,
                                "pageSize": 6,
                                "like": like,
                                "comment": comment,
                                "view": view
                            },
                            success: function (result) {
                                pageCount = result.data.pages;
                                $.each(result.data.list, function (index, simple) {
                                    lis.push(' <li class="archive-item" style="display: block;height: 145px; border-bottom: 1px solid #eff2f5">\n' +
                                        '                        <a href="#" title="标题">\n' +
                                        '                            <div class="covercon">\n' +
                                        '                                <img src="' + simple.cmsSubject.cover + '" class="cover imgloadinglater" style="display: block;">\n' +
                                        '                            </div>\n' +
                                        '                        </a>\n' +
                                        '                        <div class="archive-text">\n' +
                                        '                            <div class="archive-detail">\n' +
                                        '                                <h3><a href="../article/list/'+simple.cmsSubject.subjectId +'/' + simple.cmsSubject.subjectTitle + '" title="文章标题">' + simple.cmsSubject.subjectTitle + '</a></h3>\n' +
                                        '                                <p>' + simple.cmsSubject.subjectDes + '</p>\n' +
                                        '                                <div class="archive-info clearfix"\n' +
                                        '                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">\n' +
                                        '                                    <ul style="padding: 0;">\n' +
                                        '                                        <li class="list-user">\n' +
                                        '                                            <a href="'+host+'/user/'+simple.ucenterUser.userId+'" target="_blank">\n' +
                                        '                                                <img src="' + simple.ucenterUser.avatar + '">\n' +
                                        '                                                <span>' + simple.ucenterUser.nickName + '</span>\n' +
                                        '                                            </a>\n' +
                                        '                                        </li>\n' +
                                        '                                    </ul>\n' +
                                        '                                </div>\n' +
                                        '                                <div class="archive-info clearfix"\n' +
                                        '                                     style="margin-top: 10px; overflow: hidden;white-space: nowrap; display: flex">\n' +
                                        '                                    <ul style="padding: 0;">\n' +
                                        '                                        <li class="list-msg">\n' +
                                        '                                            <a href="#">\n' );
                                    if(simple.rss){
                                        lis.push('<span class="layui-btn layui-btn-xs layui-btn-normal">已订阅</span>');
                                    }else {
                                        lis.push('<span class="layui-btn layui-btn-xs layui-btn-normal">订阅本书</span>');
                                    }
                                    lis.push('</a>\n' +
                                        '                                            <span aria-hidden="true" style="margin-left: 8px;">已有' + simple.rssNum + '人订阅</span>\n' +
                                        '                                            <span aria-hidden="true" style="margin-left: 5px;"><i class="fa fa-eye fa-fw" title="阅读"></i>' + simple.viewNum + '</span>\n' +
                                        '                                            <span aria-hidden="true"><i class="fa fa-commenting fa-fw" title="回答"></i>' + simple.commentNum + '</span>\n' +
                                        '                                            <span aria-hidden="true"><i class="fa fa-thumbs-o-up fa-fw" title="人气"></i>' + simple.likeNum + '</span>\n' +
                                        '                                        </li>\n' +
                                        '                                    </ul>\n' +
                                        '                                </div>\n' +
                                        '                            </div>\n' +
                                        '                        </div>\n' +
                                        '                    </li>');

                                    next(lis.join(''), page < pageCount);
                                    lis = [];
                                });
                            }
                        });
                        // next(lis.join(''), page < pageCount); //假设总页数为 6
                    }, 500);
                }
            });

        });
    }


    layui.use(['util', 'element', 'layer', 'form', 'laytpl', 'laypage'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;  //表单的依赖
        var laypage = layui.laypage;//分页的依赖
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块

        //右下角bar top
        util.fixbar({
            bar1: true,
            click: function (type) {
                console.log(type);
                if (type === 'bar1') {
                    alert('点击了bar1')
                }
            }
        });

    });
</script>
</body>

</html>